import {
  Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, ViewChild,
  OnDestroy
} from '@angular/core';
import {Router} from '@angular/router';
import {Subject} from "rxjs/Subject";
import {MatchService} from "app/pages/match/match.service";

@Component({
  selector: 'match-ranking',
  templateUrl: './match-ranking.component.html',
  styleUrls: ['./match-ranking.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MatchRankingComponent implements OnInit, OnDestroy {
  @Input() matchId;
  @Output() scrollComplete: EventEmitter<any> = new EventEmitter<any>();
  @Output() disabledScroll: EventEmitter<any> = new EventEmitter<any>();
  @Output() enabledScroll: EventEmitter<any> = new EventEmitter<any>();
  @ViewChild('aside') aside;
  @ViewChild('container') container;

  public rankingList = [];
  public params = {
    matchId: 0, // 赛事id
    groupType: 1, // 只有杯赛需传组别
    page: 1,
    rows: 10
  };
  public dataStore = {
    matchType: 0, // 球类类型
    scheduleType: 0, // 赛程类型
    currentGroup: 0, // 当前组别
    groupCountArr: [], // 总分组数量
    asideScrollTop: 0,
    competitionType: 0,
    sltUiType: 0 // 选中ui类型
  };
  public stateStore = {
    haveData: true
  };
  public ngUnsubscribe: Subject<any> = new Subject<any>();
  // 球类类型对应布局
  public uiTypeList = [
    {type: 1, code: 3001},
    {type: 2, code: 3002},
    {type: 3, code: 3003},
    {type: 3, code: 3004},
    {type: 3, code: 3005},
    {type: 3, code: 300301},
    {type: 3, code: 300401},
    {type: 3, code: 300501}
  ];
  public pageDate = {
    isCup: false // 是否杯赛
  };

  constructor(public service: MatchService,
              public router: Router) {
  }

  /**
   * @description 获取赛事排名信息
   * @author ouyqx-691
   */
  getCompetitionRanking() {
    this.service.getCompetitionRanking(this.params).takeUntil(this.ngUnsubscribe).subscribe(res => {

      if (res.result === '0' && res.data) {
        const ballRanking = res.data.basketballPage || res.data.footballPage || res.data.tennisPage
          || res.data.badmintonPage || res.data.pingpongPage;
        this.scrollComplete.emit();

        // 没有数据
        if (ballRanking.list.length === 0) {
          this.showDefaultGraph();
          return;
        }

        // 获取ui显示类型
        if (this.dataStore.sltUiType === 0) {
          this.uiTypeList.filter((value) => {
            if (res.data.matchType === value.code) {
              this.dataStore.sltUiType = value.type;
            }
          });
        }

        this.params['page']++;
        this.dataStore.groupCountArr = new Array(res.data.groupCount);
        this.dataStore.matchType = res.data.matchType;
        this.rankingList = this.rankingList.concat(ballRanking.list);
        this.setAsideScrollTop();
        // this.setAsideMaxHeight();
        if (!ballRanking.hasNextPage) {
          this.disabledScroll.emit(true);
        } else {
          this.enabledScroll.emit(); // 可滑动
        }
      } else {
        this.showDefaultGraph();
      }
    });
  }

  /**
   * @description 获取相应分组排名信息
   * @author ouyqx-691
   * @date 2017/09/29
   */
  getRankingByGroup(group) {
    if (group !== this.dataStore.currentGroup) {
      this.dataStore.asideScrollTop = this.aside.nativeElement.scrollTop;
      this.rankingList = [];
      this.params.page = 1;
      this.params.groupType = group + 1;
      this.dataStore.currentGroup = group;
      this.getCompetitionRanking();
    }
  }

  /**
   * @description 前往排名详情
   * @author ouyqx-691
   * @date 2017/09/29
   */
  goToRankingDetail(ranking) {

    const params = {
      id: ranking.id,
      chartNo: ranking.chartNo,
      matchType: this.dataStore.matchType,
      isTeam: this.dataStore.competitionType
    };
    this.router.navigate([`/match/ranking`], {queryParams: params});
  }

  /**
   * @description 显示缺省图
   * @author ouyqx-691
   * @date 2017/10/13
   */
  showDefaultGraph() {
    this.stateStore.haveData = false;
    this.disabledScroll.emit(false);
  }

  /**
   * @description 设置分组滚动条高度
   * @author ouyqx-691
   * @date 2017/10/17
   */
  setAsideScrollTop() {
    const scrollTop = this.dataStore.asideScrollTop;
    if (scrollTop !== 0) {
      setTimeout(() => {
        this.aside.nativeElement.scrollTop = scrollTop;
      }, 10);
    }
  }

  ngOnInit() {
    this.params.matchId = this.matchId;
    this.dataStore.scheduleType = this.service.competitionStore.scheduleType;
    this.dataStore.competitionType = this.service.competitionStore.competitionType;
    this.service.competitionStore.cupCodeArr.filter((value) => {
      if (this.dataStore.scheduleType === value) {
        this.pageDate.isCup = true;
      }
    });
    if (!this.pageDate.isCup) {
      this.params.groupType = null;
    }
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
